<template>
	<view>
		<!-- 命主信息 -->
		<view class="home_userInfo">
			<view class="flex_row_between_center home_userInfo_title">
				<view class="home_userInfo_title_l">命主信息</view>
			</view>
			<view class="home_userInfo_desc">
				<view class="flex_row_start_center">
					<view class="home_userInfo_item flex_row_start_center" style="margin-right: 70rpx;">
						<view>姓名：</view>
						<view>张三</view>
					</view>
					<view class="home_userInfo_item flex_row_start_center">
						<view>性别：</view>
						<view>男</view>
					</view>
				</view>
				<view class="home_userInfo_item flex_row_start_center">
					<view>出生时辰：</view>
					<view>公历1999年06月15日12：00</view>
				</view>
				<view class="home_userInfo_item flex_row_start_center">
					<view>出生地点：</view>
					<view>安徽省六安市</view>
				</view>
				<view class="home_userInfo_item flex_row_start_center">
					<view>真太阳时间：</view>
					<view>根据出生地区计算</view>
				</view>
			</view>
		</view>
		<!-- 名字推荐 -->
		<view class="name_recommend">
			<view class="name_recommend_title">名字推荐</view>
			<view class="flex_row_between_center">
				<view class="name_recommend_l flex_row_start_center">
					<view class="grid" style="margin-right: 20rpx;">
						<view class="grid_line1"></view>
						<view class="grid_line2"></view>
						<view class="grid_name">陶</view>
						<view class="grid_name2">“火”</view>
					</view>
					<view class="grid">
						<view class="grid_line1"></view>
						<view class="grid_line2"></view>
						<view class="grid_name">浅</view>
						<view class="grid_name2">“水”</view>
					</view>
					
				</view>
				<view class="flex_row_start_center name_recommend_r">
					<view class="name_recommend_r_icon" style="margin-right: 18rpx;">
						<view class="text-gray cuIcon-favor" style="font-size: 40rpx;"></view>
						<view>收藏</view>
					</view>
					<view class="name_recommend_r_icon">
						<view class="lg text-gray cuIcon-right nav_icon"></view>
						<view>解析</view>
					</view>
				</view>
			</view>
			<view>
				<view  class="info_nav flex_row_start_center" >
					<view v-for="(item, index) in navList"
							:key="index"
							class="nav-item"
							:class="{ current: tabCurrentIndex === index }"
							@click="tabClick(index)">{{item.text}}</view>
				</view>
				<swiper
				  :current="tabCurrentIndex"
				  class="swiper-box"
				  duration="300"
				  @change="changeTab"
				  :disable-touch="disTouch"
				>
				  <swiper-item
				    class="tab-content"
				    v-for="(tabItem, tabIndex) in navList"
				    :key="tabIndex"
				  >
				    <scroll-view
				      scroll-y
				      
				    >
					<view style="margin-bottom: 40rpx;">
						木行人做事总是劳心劳苦，亲力亲为，因此比其他行的人更容易因为劳累过度，而消耗肝血，积劳成病，也更容易动肝上火，肝气郁结。木行人也更易出现抑郁情绪，通常睡眠质量差，生活节奏容易被打乱，脾胃功能弱，消化能力差。所以，木行人更容易患有乳腺增生、颈椎病、腰肌劳损、神经衰弱、肝胆系统方面的疾病。饮食调节：在肝胆的治疗上要注意饮食，避免暴饮暴食。不要吃太油腻的食物，会造成脂肪堆积，加重肝胆负担，诱发脂肪肝，损害肝功能。避免饮酒：饮酒是损害肝功能的最急性因素。酒精含量越高，对肝脏的损害越大，所以平时要禁酒。充分休息：基础肝功能受损的患者，注意休息，劳逸结合可以避免肝细胞进一步受损。
					</view>
				     <view class="flex_row_between_center">
				     	<view class="name_recommend_l flex_row_start_center">
				     		<view class="grid" style="margin-right: 20rpx;">
				     			<view class="grid_line1"></view>
				     			<view class="grid_line2"></view>
				     			<view class="grid_name">陶</view>
				     			<view class="grid_name2">“火”</view>
				     		</view>
				     		<view class="grid">
				     			<view class="grid_line1"></view>
				     			<view class="grid_line2"></view>
				     			<view class="grid_name">浅</view>
				     			<view class="grid_name2">“水”</view>
				     		</view>
				     		
				     	</view>
				     	<view class="flex_row_start_center name_recommend_r">
				     		<view class="name_recommend_r_icon" style="margin-right: 18rpx;">
				     			<view class="text-gray cuIcon-favor" style="font-size: 40rpx;"></view>
				     			<view>收藏</view>
				     		</view>
				     		<view class="name_recommend_r_icon">
				     			<view class="lg text-gray cuIcon-right nav_icon"></view>
				     			<view>解析</view>
				     		</view>
				     	</view>
				     </view>
					 <view class="flex_row_between_center">
					 	<view class="name_recommend_l flex_row_start_center">
					 		<view class="grid" style="margin-right: 20rpx;">
					 			<view class="grid_line1"></view>
					 			<view class="grid_line2"></view>
					 			<view class="grid_name">陶</view>
					 			<view class="grid_name2">“火”</view>
					 		</view>
					 		<view class="grid">
					 			<view class="grid_line1"></view>
					 			<view class="grid_line2"></view>
					 			<view class="grid_name">浅</view>
					 			<view class="grid_name2">“水”</view>
					 		</view>
					 		
					 	</view>
					 	<view class="flex_row_start_center name_recommend_r">
					 		<view class="name_recommend_r_icon" style="margin-right: 18rpx;">
					 			<view class="text-gray cuIcon-favor" style="font-size: 40rpx;"></view>
					 			<view>收藏</view>
					 		</view>
					 		<view class="name_recommend_r_icon">
					 			<view class="lg text-gray cuIcon-right nav_icon"></view>
					 			<view>解析</view>
					 		</view>
					 	</view>
					 </view>
					</scroll-view>
				  </swiper-item>
				</swiper>
			</view>
		</view>
		<view class="name_button">找大师1v1专业指导</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navList: [{
						state: 0,
						text: '音律音调',
						balanceList: [],
					},
					{
						state: 1,
						text: '字型结构',
						balanceList: [],
					},
					{
						state: 2,
						text: '寓意详解',
						balanceList: [],
						current: 1, //分页
					},
				],
				tabCurrentIndex:0,
			}
		},
		onLoad(){},
		methods:{
			tabClick(index){
				this.tabCurrentIndex=index
			},
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				// this.loadData('tabChange');
			},
		}
	}
</script>

<style lang="scss">
	/*命主信息 start  */
	.home_userInfo{
		background-color: #fff;
		padding: 15rpx 44rpx 16rpx 44rpx;
		position: relative;
		
		.home_userInfo_title{
			color: #9B9B9B;
			font-size: 28rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:6px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
				
			}
			.home_userInfo_title_l{
				color: #4C4C4C;
				font-size: 28rpx;
			}
		}
		
		.home_userInfo_desc{
			.home_userInfo_item{
				margin-top: 30rpx;
				color: #4C4C4C;
				font-size: 28rpx;
				& view:first-child{
					margin-right: 25rpx;
				}
			}
		}
	}
	/*命主信息 end  */
	/*名字推荐 start  */
	.name_recommend{
		margin-top: 8rpx;
		background-color: #fff;
		padding: 15rpx 44rpx 16rpx 44rpx;
		position: relative;
		
		.name_recommend_title{
			color: #4C4C4C;
			font-size: 28rpx;
			&::after{
				content: '';
				position: absolute;
				left: 22rpx;
				top:6px;
				height: 14px;
				width: 4px;
				background-color:#9B4C3A;
				
			}
		}
		.name_recommend_l{
			margin-top: 20rpx;
			height: 182rpx;
		}
		.name_recommend_r{
			font-size: 28rpx;
			color: #8C8C8C;
			.name_recommend_r_icon{
				text-align: center;
				
				.nav_icon{
					color:#fff;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 50%;
					background-color: #b29172;
				}
			}
		}
	}
	.grid{
		width: 120rpx;
		height: 120rpx;
		border: 2rpx solid #d7a8aa;
		position: relative;
		
		.grid_line1{
			position: absolute;
			width: 100%;
			height: 1px;
			background: #d7a8aa;
			left: 0;
			top: 50%;
		}
		.grid_line2{
			position: absolute;
			width: 1px;
			height: 100%;
			background: #d7a8aa;
			left: 50%;
			top:0;
		}
		.grid_name{
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			font-size: 70rpx;
			// font-weight: bold;
		}
		.grid_name2{
			position: absolute;
			left: 50%;
		    bottom: -48rpx;
			transform: translateX(-50%);
			font-size: 32rpx;
			color: #cca298;
		}
	}
	/*名字推荐 end  */
	
		
	.info_nav{
		padding: 20rpx 36rpx;
		color: #8C8C8C;
		font-size: 32rpx;
		background-color: #fff;
		.nav-item{
			margin-right: 106rpx;
			
			&:last-child{
				margin-right: 0;
			}
			&.current {
			  color: #A76252;
			  font-size: 32rpx;
			  position: relative;
			  
			  &::after{
				content: '';
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom: -18rpx;
				height: 6rpx;
				width: 20px;
				background-color:#A76252;
			  }
			}
			
		}
	}
	.swiper-box{
		height: 900rpx;
		.tab-content{
			height: 100%;
		}
	}
	
	.name_button{
		position: fixed;
		left: 89rpx;
		bottom: 30rpx;
		border-radius: 46rpx;
		background: #9e4035;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		width: 572rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>